{extend name="$adminPage"}

{block name="headStyle"}
<style type="text/css">
    .field-box {
        padding: 15px 0;
    }

    .field-box:not(:first-child) {
        border-top: 1px dashed #c2c2c2;
    }

    .field-box .title {
        margin-bottom: 15px;
    }
</style>
{/block}

{block name="content"}
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body layui-form" lay-filter="test">
            <!-- 单行文本框 -->
            <div class="field-box text">
                <div class="title">单行文本框示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="text_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="你好">设置单行文本框示例值为：你好
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取单行文本框示例值</button>
                </div>
            </div>
            <!-- 复选框 -->
            <div class="field-box checkbox">
                <div class="title">复选框示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="checkbox_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="2">设置复选框示例值为：香蕉
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取复选框示例值</button>
                </div>
            </div>
            <!-- 树（编辑） -->
            <div class="field-box tree-edit">
                <div class="title">树（编辑）示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="tree_edit_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val"
                            data-value='[{"id":1,"pid":0,"name":"衣服"},{"id":2,"pid":1,"name":"衬衣"},{"id":3,"pid":1,"name":"短袖","drag":false},{"id":4,"pid":0,"name":"帽子"},{"id":5,"pid":4,"name":"遮阳帽"},{"id":6,"pid":0,"name":"手套"}]'>
                        重置树（编辑）示例值
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取树（编辑）示例值</button>
                </div>
            </div>
            <!-- 富文本 -->
            <div class="field-box editor">
                <div class="title">富文本示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="editor_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="<p>你好</p>">设置富文本示例值为：&lt;p&gt;你好&lt;/p&gt;</button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取富文本示例值</button>
                </div>
            </div>
            <!-- markdown -->
            <div class="field-box markdown">
                <div class="title">Markdown示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="markdown_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="## 你好">
                        设置Markdown示例值为：## 你好
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取Markdown示例值</button>
                </div>
            </div>
            <!-- custom -->
            <div class="field-box custom">
                <div class="control"></div>
                <div class="btn-box" data-field-key="custom_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="你好">设置自定义字段示例值为：你好
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取自定义字段示例值</button>
                </div>
            </div>
            <!-- 按钮区域 -->
            <div class="field-box btn-box">
                <button type="button" class="layui-btn layui-btn-sm btn-clear-val">清空所有字段值</button>
                <button type="button" class="layui-btn layui-btn-sm btn-reset-val">重置所有字段值</button>
                <button type="button" class="layui-btn layui-btn-sm btn-all-val">获取所有字段值</button>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    layui.use(['yunj', "jquery", "validate"], function () {
        let win = window;
        let doc = document;
        let $ = layui.jquery;
        let validate = layui.validate;

        class SingleField {

            constructor() {
                this.formId = "test";
                this.formFieldObj = {};
                this.init();
            }

            init() {
                let that = this;
                that.setText();
                that.setCheckbox();
                that.setTreeDrag();
                that.setEditor();
                that.setMarkdown();
                that.setCustom();
                that.setEventBind();
            }

            // 设置单行文本框
            setText() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "text_key",
                    args: {
                        default: "初始值",
                        verifyTitle: "单行文本框"
                    }
                };

                yunj.formField("text", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.text .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置复选框
            setCheckbox() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "checkbox_key",
                    args: {
                        default: 1,
                        options: {
                            1: "苹果",
                            2: "香蕉",
                            3: "西瓜"
                        },
                        verifyTitle: "复选框"
                    }
                };

                yunj.formField("checkbox", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.checkbox .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置树（编辑）
            setTreeDrag() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "tree_edit_key",
                    args: {
                        mode: 'edit',
                        dragSort: 'level',
                        options: [
                            {
                                event: "edit",
                                title: "编辑",
                                icon: "layui-icon-edit",
                                confirmText: "确认这么做？",
                            },
                            "rename", "remove"
                        ],
                        default: $('.field-box.tree-edit .btn-set-val').data('value'),
                        verifyTitle: "树（编辑）",
                    }
                };

                yunj.formField("tree", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.tree-edit .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置富文本
            setEditor() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "editor_key",
                    args: {
                        default: "富文本初始值",
                        verifyTitle: "富文本"
                    }
                };

                yunj.formField("editor", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.editor .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置Markdown
            setMarkdown() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "markdown_key",
                    args: {
                        default: "Markdown初始值",
                        verifyTitle: "Markdown"
                    }
                };

                yunj.formField("markdown", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.markdown .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置自定义字段
            setCustom() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: 'custom_key',
                    args: {
                        default: '这是自定义字段示例内容'
                    }
                };

                // @param {string} formId 表单构建起id
                yunj.formField((formId) => {
                    return `<label class='layui-form-label'>自定义字段示例标题</label>
                            <div class='layui-input-inline yunj-form-item-control'>自定义字段示例内容：<span class='value'></span></div>
                            <div class='yunj-form-item-desc'>自定义字段示例描述</div>
                            <script type='application/javascript'>
                                layui.use(['jquery'],function() {
                                    let $ = layui.jquery;

                                    // 设置字段值。事件名：yunj_form_{当前表单构建器id}_{字段key}_set_value
                                    $(document).bind('yunj_form_${formId}_custom_key_set_value',function(e,field) {
                                        // field.boxEl 当前字段外部父元素的jQuery对象
                                        // field.value 当前字段的值
                                        field.boxEl.find('.value').html(field.value);
                                    });
                                    // 获取字段值。事件名：yunj_form_{当前表单构建器id}_{字段key}_get_value
                                    $(document).bind('yunj_form_${formId}_custom_key_get_value',function(e,field) {
                                        // field.boxEl 当前字段外部父元素的jQuery对象
                                        // field.value 当前字段的值，默认为空字符串''
                                        field.value = field.boxEl.find('.value').html();
                                    });
                                });
                            <\/script>`;
                }, options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.custom .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 事件绑定
            setEventBind() {
                let that = this;

                // 根据字段对象设置单个字段值
                $(".field-box .btn-box .btn-set-val").on("click", function () {
                    let fieldKey = $(this).parents(".btn-box").eq(0).data("fieldKey");
                    let fieldObj = that.formFieldObj.hasOwnProperty(fieldKey) ? that.formFieldObj[fieldKey] : null;
                    if (!fieldObj) {
                        alert(`字段key=[${fieldKey}]还未完成渲染`);
                        return;
                    }
                    let value = $(this).data("value");
                    fieldObj.setValue(value);
                });

                // 根据字段对象获取单个字段值
                $(".field-box .btn-box .btn-get-val").on("click", function () {
                    let fieldKey = $(this).parents(".btn-box").eq(0).data("fieldKey");
                    let fieldObj = that.formFieldObj.hasOwnProperty(fieldKey) ? that.formFieldObj[fieldKey] : null;
                    if (!fieldObj) {
                        alert(`字段key=[${fieldKey}]还未完成渲染`);
                        return;
                    }
                    let fieldVal = fieldObj.getValue();
                    if (yunj.isObj(fieldVal) || yunj.isArray(fieldVal)) {
                        fieldVal = JSON.stringify(fieldVal);
                    }
                    console.log(fieldVal);
                    alert(`字段[${fieldKey}] = ` + fieldVal);
                });

                // 根据表单id清空所有字段值
                $(".field-box.btn-box .btn-clear-val").on("click", function () {
                    yunj.formClear((that.formId));
                });

                // 根据表单id重置所有字段值
                $(".field-box.btn-box .btn-reset-val").on("click", function () {
                    yunj.formReset(that.formId);
                });

                // 根据表单id获取所有字段值
                $(".field-box.btn-box .btn-all-val").on("click", function () {
                    let formData = yunj.formData(that.formId, validate);
                    alert(JSON.stringify(formData));
                });
            }

        }

        $(doc).ready(function () {
            new SingleField();
        });
    });
</script>
{/block}